<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Home</title>
		<!---Font Icon-->
		<link href="css/all.min.css" rel="stylesheet">
		<link href="font/flaticon.css" rel="stylesheet">
		<!-- / -->
		<!-- Plugin CSS -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/slick.css">
		<link rel="stylesheet" href="css/pogoslider.css">
		<link rel="stylesheet" href="css/jquery.fancybox.min.css">
		<link rel="stylesheet" href="css/jquery-ui.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/responsive.css">
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1879852_wl6g6ow65oq.css"/>
		
        <style>
        #formuser{
            display: block;
            margin: 0 auto;
            width: 400px;
        }
        .form_user>li{
            position: relative;
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid gray;
            border-radius: 5px;
            margin: 40px 0;
        }
        .form_user>li>input{
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            margin-left: 1px;
            padding-left: 20px;
            color: black;
            font-size: 20px;
        }
        .tel{
            position: relative;
            border-style: none;
        }
        .usertelnum{
            width: 150px;
            height: 50px;
            border: 1px solid grey;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }
        .usertelnum>input{
            position: absolute;
            border-style: none;
            outline: none;
            top: 0px;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            font-size: 20px;
        }
        #icon{
            position: absolute;
            top: 0;
            right: 10px;
            color: gray;
        }
        .show_phone{
            float: right;
            width: 210px !important;
            height: 50px !important;
            border-radius: 5px;
            border: 1px solid silver !important;
            font-size: 20px;
            padding-left: 20px;
            outline: none;
            border-style: solid;
        }
        .phone_name{
            display: none;
            position: absolute;
            border-radius: 5px;
            z-index: 9;
            top: 52px;
            width: 398px;
            height: 250px;
            border: 1px solid silver;
            background-color: white;
            overflow-y: scroll;
        }
        .phone_name>ul{
            margin: 0%;
            padding: 0%;
        }
        .phone_name li{
            list-style: none;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 20px;
            color: black;
        }
        .phone_name li:hover{
            background-color: #e4e4e4;
        }
        .sub_btn{
            background-color: #2e7fff;
        }
        .sub_btn>input{
            width:400px;
            height: 50px;
            outline: none;
            border-style: none;
            background-color: transparent;
            color: white;
            font-size: 22px;
        }
        .sub_btn:hover{
            background-color: #83aae9;
        }
        .telerror{
            clear: left;
            display: inline-block;
            font-size: 14px;
            color: gray;
            position: relative;
            top: 5px;
        }
        .emailshow{
            display: block;
            font-size: 14px;
            color: gray;
            position: absolute;
            top: 53px;
        }
		.nicknameshow{
            display: block;
            font-size: 14px;
            color: gray;
           position: absolute;
            top: 58px
        }
		.passwordshow{
            display: block;
            font-size: 14px;
            color: gray;
            position: absolute;
            top: 63px
        }
        .error {
            font-size: 14px;
            color: red;
            position: absolute;
            top: 53px;
            left: 0;
            background-image: url("./img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 20px;
            padding-left: 25px;
        }       
        .success {
            display: none;
            position: absolute;
            top: 15px;
            left: 200px;
        }
    </style>
	</head>

	<body>

		<!-- ===================
   back to top start 
 =================== -->
		<div id="back-top-btn" class="back-top-btn">
			<i class="fa fa-chevron-up"></i>
		</div>
		<!--===================
   back to top end 
 =================== -->

		<!--=============
Preloader Part HTML Start
===================
		<div id="preloader">
			<div id="loading-center">
				<img src="images/loader.gif" alt="">
			</div>
		</div>-->
		<!--=============
Preloader Part HTML End
===================-->
<!-- header顶栏 -->

		<header>
			<nav id="nav-part" class="navbar header-nav custom_nav sticky-top navbar-expand-md">
				<div class="container p-0">
					<a class="navbar-brand" href="index.html"><img src="images/logo.svg" class="img-fluid" alt="logo"></a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span></span>
						<span></span>
						<span></span>
					</button>
                    <button type="button" style="border-radius:4px; margin-left:30px; width:100px; border:none" ><a href="index.html"><span style="color:#F15f2a">返回</span></a></button>
					
				</div>
			</nav>
		</header>

<!-- 滚动图片 -->

		<div class="tg-sliderholder">
			<div id="tg-homeslider" class="tg-homeslider tg-haslayout">
				<div class="pogoSlider-slide" data-transition="expandReveal" data-duration="600" style="background:url(images/banner-image-2.jpg) no-repeat scroll center center;">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<form id="formuser" action="" method="get" onsubmit="">
        <ul class="form_user">
            <li class="litxt">
                <input type="text" style="width: 396px;" class="userData" name="email" placeholder="邮箱" value="" />
                <span class="emailshow">请输入你的常用邮箱</span>
            </li>
            <li class="litxt">
                <input type="text" style="width: 396px;" class="userData" name="nickname" placeholder="昵称 包含字母数字" value="" />
                <span class="nicknameshow"></span>
            </li>
            <li class="litxt">
                <input type="text" style="width: 396px;" class="userData" name="password" placeholder="密码 必须包含字母数字且长度在6~8位" value="" />
                <span id="passwordshow" style="color:gray"></span>
            </li>
            <li class="tel">
                <div class="usertelnum">
                    <input id="telnum" type="text" value="+86">
                    <!-- <i  class="iconfont">&#xf01a6;</i> -->
					<i id="icon" class="iconfont icon-ln_jiantouxia"> </i>
                </div>
                <input type="text" class="show_phone" placeholder="手机号码">
                <span class="telerror">可以通过该手机号找回密码</span>
            </li>
            <li class="sub_btn">
                <input type="submit" value="立即注册" />
            </li>
        </ul>
    </form>

    <script>
        var litxt = document.getElementsByClassName('litxt');
        var emailshow = document.getElementsByClassName('emailshow')[0];
        var phone_name = document.getElementsByClassName('phone_name')[0];
        var formuser = document.getElementById('formuser');
        var telnum = document.getElementById('telnum');
        var txt = document.getElementsByClassName('userData');
        var success = document.getElementsByClassName('success');
        var nameinfo = ["邮箱", "昵称", "密码"];
        window.onload = addEvent();
        function addEvent() {
            for (var i = 0; i < litxt.length; i++) {
                txt[i].index = i;
                txt[i].onfocus = function () {
                    emailshow.style.display = 'none';
                    this.parentNode.style.borderColor = "#2e7fff";
                    if (this.parentNode.lastChild.nodeName.toLowerCase() == "span" && this.parentNode.lastChild.className ==
                        "error") {
                        this.parentNode.lastChild.remove();
                    }
                }
                txt[i].onblur = function () {
                    this.parentNode.style.borderColor = "silver";
                    if (this.value == '') {
                        var span = document.createElement('span');
                        span.className = 'error';
                        span.innerHTML = nameinfo[this.index] + '不能为空！'
                        this.parentNode.appendChild(span);
                        this.parentNode.style.borderColor = 'red';
                    } else {
                        if (this.index == 0) {
                            if (litxt[this.index].children[0].value.indexOf("@") != -1 && litxt[this.index].children[0].value.indexOf("@") + 1 != litxt[this.index].children[0].value.length) {
                                success[this.index].style.display = 'block';
                            } else {
                                var span = document.createElement('span');
                                span.className = 'error';
                               span.innerHTML = nameinfo[this.index] + '格式不正确！'
                                this.parentNode.appendChild(span);
                            }
                        }
                        if (this.index == 1) {
                            success[this.index].style.display = 'block';
                        }
                        if (this.index == 2) {
                            if (litxt[this.index].children[0].value.length >= 6 && litxt[this.index].children[0].value.length <= 8) {
                                if (!isNaN(litxt[this.index].children[0].value)) {
                                  var span = document.createElement('span');
                                    span.className = 'error';
                                    span.innerHTML = nameinfo[this.index] + '必须有字母或符号！'
                                    this.parentNode.appendChild(span);
                                } else {
                                 success[this.index].style.display = 'block';
                                }
                            } else {
                                var span = document.createElement('span');
                                span.className = 'error';
                                span.innerHTML = nameinfo[this.index] + '长度必须在6~8位之间'
                                this.parentNode.appendChild(span);
                            }
                        }
                    }
                }
            }
        }
        telnum.onclick = function () {
            phone_name.style.display = 'block';
        }
        telnum.onblur = function () {
            phone_name.style.display = 'none';
        }
        formuser.onsubmit = function () {
            if (submethods()) { 
                event.preventDefault();
                event.stopPropagation();
            }
            addEvent();
        }
        function submethods() {
            emailshow.style.display = 'none';
            for (var i = 0; i < litxt.length; i++) {
                if (litxt[i].children[0].value == '') {
                    var span = document.createElement('span');
                    span.className = 'error';
                    span.innerHTML = nameinfo[i] + '不能为空！'
                    litxt[i].appendChild(span);
                    litxt[i].style.borderColor = 'red';
                }
            }
            var length = document.getElementsByClassName('error').length;
            return length;
        }
    </script>
                                
                                
                                
							</div>
						</div>
					</div>
				</div>
				
				
			</div>
			<a class="tg-btnscrol tg-btnsectionscroll" href="javascript:void(0);"><i class="icon-chevron-down"></i></a>
		</div>

<!-- 八大菜系 -->


		<!--======================
	Blog Part HTML End
=======================-->

		<!--====================
Contact Part HTML Start
======================-->
	<footer>
		<section id="contact" class="contact section" style="padding-top: 20px;margin-top: 20px;">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 contact-logo" style="padding-bottom: 0;">
						<img style="width: 250px;" src="images/logo.svg" alt="" class="img-fluid">
					</div>
				</div>
				<div class="row" style="height: 150px;">
					<div>
						<div class="contact-address" style="margin-left:90px; font-size:30px">
							<h5>憨憨美食记</h5>
							<div style="margin-top:10px; font-size:30px">
								<p style="font-size:20px; font-family:仿宋">
									了解当地美食特色<br>
									让你的旅途不再遗"憨"
								</p>
							</div>
						</div>
					</div>

					<div class="col-lg-4 col-md-6" style="padding: 0;">
						<div class="contact-photo" style="margin-left:330px ">
									<table width="500" height="143" border="0" style="right: 10%;">
										<tr>
											<td colspan="4" style="color:#FFF">
												<h5 style="padding: 0;">欢迎您为我们提供更好的意见</h5>
											</td>
										</tr>
										<tr height="10">
										</tr>
										<tr align="center">
											<td width="150"><a href=""><img src="images/instra-1.jpg" width="60" height="60"></a></td>
											<td width="150"><a href=""><img src="images/instra-2.jpg" width="60" height="60"></a></td>
											<td width="150"><img src="images/instra-4.jpg" width="60" height="60"></td>
											<td width="150"><img src="images/instra-4.jpg" width="60" height="60"></td>
										</tr>
										<tr style="color:#FFF;font-family:仿宋;text-align: center;">
											<td>点击进入<br>
												憨憨官方微博</td>
											<td><span style="left:200px">点击进入<br>
													憨憨QQ空间</span></td>
											<td>扫描二维码添加<br>
												憨憨为微信好友</td>
											<td>
												<p>扫描二维码下载</p>
												<p>憨憨手机客户端</p>
											</td>
										</tr>
									</table>
									<br>
						</div>
					</div>
				</div>
				<div class="row footer-br" style="font-size: 12px;padding-top: 15px;">
					<div class="col-lg-12">
						<div class="footer-icon">
							<ul>
								<li><a title="公司简介" href="https://j.meishi.cc/" target="_blank">公司简介</a></li>
								<li><a title="关于我们" href="https://j.meishi.cc/aboutus.html" target="_blank">关于我们</a></li>
								<li><a title="产品" href="https://j.meishi.cc/download.html" target="_blank">产品</a></li>
								<li><a title="加入我们" href="https://j.meishi.cc/joinus.html" target="_blank">加入我们</a></li>
								<li><a title="联系我们" href="https://j.meishi.cc/contactus.html" target="_blank">联系我们</a></li>
								<li><a title="商务合作" href="https://j.meishi.cc/contactus.html" target="_blank">商务合作</a></li>
								<li><a title="用户协议" href="https://www.meishij.net/siteinfo/user_agreement.php" target="_blank">用户协议</a></li>
								<li><a title="用户协议" href="https://www.meishij.net/siteinfo/privacy.php" target="_blank">隐私政策</a></li>
								<li><a title="网站地图" href="https://www.meishij.net/siteinfo/maps.php" target="_blank">网站地图</a></li>
								<li><a title="友情链接" href="https://www.meishij.net/siteinfo/links.php" target="_blank">友情链接</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-12">
						<div class="copy-right">
							<p style="padding-top: 0;padding-bottom: 10px;">>京ICP备14030359号|京公网安备11010802026928</a> Copyright © 2003-2020 MEISHIJ CO.,LTD.</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	</footer>
		<!--===========================
	Contact Part HTML End
============================-->

		<!-- jQuery -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/jquery-migrate-3.0.0.min.js"></script>

		<!-- Plugins -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/slick.min.js"></script>
		<script src="js/pogoslider.js"></script>
		<script src="js/jquery.fancybox.min.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<script src="js/counter.js"></script>
		<script src="js/waypoints.js"></script>
		<script src="js/custom.js"></script>

	</body>
</html>
